<template>
	<div class="my-integral-main">
		<header class="fix">
			<div class="head fl"><img class="head_img" :src="integralInformation.headerUrl"></div>
			<div class="headermid fl">
				<div class="headermid_name">{{integralInformation.nickname}}</div>
				<div class="headermid_integral fix"><img src="../assets/image/pic_gold@2x.png"><p>{{integralInformation.point}}</p></div>
			</div>
			<router-link to="/" class="integralrule fr fix">
				<p>积分规则</p>
				<img src="../assets/image/ico_arrowswhite@2x.png">
			</router-link>
		</header>
		<div class="useintegral">
			<ul class="fix">
				<li class="useintegral_li fl">
					<div class="useintegral_liname">累计积分抵扣金额</div>
					<div class="useintegral_linum">{{integralInformation.dAmountCount}}</div>
				</li>
				<li class="useintegral_li fl">
					<div class="useintegral_liname">累计积分抵扣订单</div>
					<div class="useintegral_linum">{{integralInformation.dOrderCount}}</div>
				</li>
			</ul>
		</div>
		<dl>
			<dt class="integraldetails">积分明细</dt>
			<dd class="integraldd fix" v-for="item in integralList.rows">
				<div class="integraldd_left fl">
					<div class="integraldd_name">{{item.des}}</div>
					<div class="integraldd_num">订单号：{{item.orderNo}}</div>
				</div>
				<div class="integraldd_right fr">
					<div class="integraldd_money">{{item.point}}</div>
					<div class="integraldd_time">{{item.createDate}}</div>
				</div>
			</dd>
		</dl>
	</div>
</template>
<script type="text/javascript">
import Vue from 'vue'

export default {
	name: 'app',
	data () {
		return {
			token: '',
			pageNo: '1',
			integralInformation: '',
			integralList: '',
		}
	},
	mounted:function () {
		this.$nextTick(function () {
			this.getLocalStorage();
			this.myIntegral();
		});
	},
	methods:{
		getLocalStorage:function () {
			this.token = (window.localStorage.getItem('token') || '[]');
		},
		myIntegral:function () {
			var _this = this;
			// 我的积分信息
			this.$http.post(Util.ajaxPath.devProductUrl+"shop-mms/mms/me/point",{token: this.token,}, {emulateJSON:true}).then(function (res) {
				_this.integralInformation = res.body.content;
				// console.log(res.body.content);
			});
			// 我的积分信息
			this.$http.post(Util.ajaxPath.devProductUrl+"shop-mms/mms/me/pointDetail",{token: this.token, pageNo: this.pageNo,}, {emulateJSON:true}).then(function (res) {
				_this.integralList = res.body.content;
				// console.log(res.body.content);
			});
		}
	}
}
</script>
<style lang="scss">
  .my-integral-main{
    header{ width: 100%; height: 1.88rem; background: url(../assets/image/bg@2x.png) no-repeat; background-size: 100% 100%; }
    .head{ margin: 0.46rem 0.3rem 0 0.3rem; width: 0.92rem; height: 0.92rem; background: #fff; border: 2px solid #ddd; border-radius: 100%; }
    .head_img{ display: block; margin: 0 auto; padding-top: 0.03rem; width: 0.86rem; height: 0.86rem; border-radius: 100%; }
    .headermid{ padding-top: 0.56rem; }
    .headermid_name{ height: 0.22rem; line-height: 0.22rem; font-size: 0.22rem; color: #999; }
    .headermid_integral{
      padding-top: 0.22rem;
      img{ float: left; padding-top: 0.06rem; width: 0.36rem; height: 0.36rem; }
      p{ float: left; padding-left: 0.12rem; height: 0.42rem; line-height: 0.42rem; font-size: 0.42rem; color: #fd2419; }
    }
    .integralrule{
      margin-top: 0.74rem; width: 1.48rem; height: 0.4rem; background: rgba(51,51,51,.7); border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem;
      p{ float: left; padding: 0 0.1rem 0 0.18rem; line-height: 0.4rem; font-size: 0.24rem; color: #fff; }
      img{ float: left; padding-top: 0.08rem; width: 0.14rem; height: 0.24rem; }
    }
    .useintegral{ padding: 0.3rem 0 0.22rem; background: #fff; }
    .useintegral_li{
      width: calc(100%/2 - 0.5px);
      +.useintegral_li{ border-left: 1px solid #f1f1f1; }
    }
    .useintegral_liname{ height: 0.24rem; line-height: 0.24rem; text-align: center; font-size: 0.24rem; color: #999; }
    .useintegral_linum{ padding-top: 0.2rem; height: 0.32rem; line-height: 0.32rem; text-align: center; font-size: 0.32rem; color: #333; }
    .integraldetails{ padding: 0.2rem 0 0 0.3rem; height: 0.54rem; line-height: 0.54rem; font-size: 0.28rem; color: #666;  }
    .integraldd{ padding: 0 0.3rem; height: 1.2rem; background: #fff; border-bottom: 1px solid #f1f1f1; }
    .integraldd_name{ padding-top: 0.32rem; height: 0.28rem; line-height: 0.28rem; font-size: 0.28rem; color: #333; }
    .integraldd_num{ padding-top: 0.22rem; height: 0.22rem; line-height: 0.22rem; font-size: 0.22rem; color: #999; }
    .integraldd_money{ padding-top: 0.32rem; height: 0.28rem; line-height: 0.28rem; text-align: right; font-size: 0.28rem; color: #333; }
    .integraldd_time{ padding-top: 0.28rem; height: 0.2rem; line-height: 0.2rem; text-align: right; font-size: 0.2rem; color: #999; }
    .red{ color: #ff365d; }
  }
</style>
